<template>
  <div class="per_info">
    <!-- 头部标题 -->
    <div class="head_tit">
      <div class="tit_fl">
        <img class="tit_fl_img" @click="$router.go(-1)" src="../assets/myImg/back@2x.png" alt />
      </div>
      <span>{{title}}</span>
    </div>

    <!-- 下方信息 -->
    <div class="repair" v-show="pageTypes == 'pass'">
      <ul class="repair_list">
        <li class="repair_item">
          <span>原始密码</span>
          <input class="repair_inp" v-model="oldPass" type="text" placeholder="请输入原始密码" />
        </li>

        <li class="repair_item">
          <span>新密码</span>
          <input class="repair_inp" v-model="newPass1" type="text" placeholder="请输入新密码" />
        </li>

        <li class="repair_item">
          <span>确认密码</span>
          <input class="repair_inp" v-model="newPass2" type="text" placeholder="请再次输入密码" />
        </li>
      </ul>
      <!-- 确认 -->
      <div class="exit_out" @click="changePass">
        <span>确定</span>
      </div>
    </div>

    <div class="repair" v-show="pageTypes == 'user'">
      <!-- 修改昵称页面 -->
      <ul class="repair_list">
        <li class="repair_item">
          <span>原始昵称</span>
          <span>{{oldNickname}}</span>
          <!-- <input class="repair_inp" v-model="oldNickname" type="text" placeholder="请输入原始密码" /> -->
        </li>

        <li class="repair_item">
          <span>新昵称</span>
          <input class="repair_inp" v-model="newNickname" type="text" placeholder="请输入新昵称" />
        </li>
      </ul>
      <!-- 确认 -->
      <div class="exit_out" @click="changeUser">
        <span>确定</span>
      </div>
    </div>
  </div>
</template>

<script>
import { changeUserPass, getBannerByCateName } from "../api/repairSecret";
export default {
  name: "PerInfo",
  data() {
    return {
      oldPass: "",
      newPass1: "",
      newPass2: "",
      // 是否是修改昵称页面
      pageTypes: "pass",
      oldNickname: "",
      newNickname: "",
      title: "修改密码",
      userName: "",
    };
  },
  methods: {
    changePass() {
      let that = this;
      let info = {
        user_pass: that.oldPass,
        new_pass: that.newPass1,
        new_pass2: that.newPass2,
      };
      changeUserPass(info).then((res) => {
        if (res.code == 200) {
          // 删除本token
          window.localStorage.removeItem("token");
          that.$toast(
            {
              duration: 2000,
              message: res.msg,
            },
            1000
          );
          setTimeout(() => {
            // 跳转到登录页
            this.$router.push("/login");
          }, 1000);
        } else {
          that.$toast({
            duration: 2000,
            message: res.msg,
          });
        }
      });
    },
    // 修改昵称
    changeUser() {
      let that = this;
      getBannerByCateName(this.newNickname).then((res) => {
        console.log(res);
        if (res.code == 200) { 
          that.$toast(
            {
              duration: 2000,
              message: res.msg,
            },
            1000
          );
          setTimeout(() => {
            // 跳转到登录页
            this.$router.push("/my");
          }, 1000);
        } else {
          that.$toast({
            duration: 2000,
            message: res.msg,
          });
        }
      });
    },
  },
  watch: {
    $route(value) { 
      if (value.query.user) {
        this.pageTypes = "user";
        this.title = "修改昵称";
      } else {
        this.pageTypes = "pass";
        this.title = "修改密码";
      }
    },
  },
  mounted() {  
    if(this.$route.query.user == 'user'){
      this.pageTypes = 'user'
      this.title = '修改昵称'
    }else{
        this.pageTypes = "pass";
        this.title = '修改密码'
    }
    this.oldNickname = window.localStorage.getItem("username");
  },
};
</script>

<style lang="less" scoped>
// 头部标题
.head_tit {
  position: relative;
  text-align: center;
  color: #333;
  font-weight: 700;
  height: 1.333333rem;
  line-height: 1.333333rem;
  font-size: 0.453333rem;
  .tit_fl {
    position: absolute;
    left: 0;
    top: 0.266667rem;
    width: 0.706667rem;
    height: 0.706667rem;
    border-radius: 50%;
    .tit_fl_img {
      position: relative;
      top: -0.32rem;
      width: 0.386667rem;
      height: 0.386667rem;
    }
  }
}

// 退出按钮
.exit_out {
  height: 1.2rem;
  line-height: 1.2rem;
  text-align: center;
  color: #fff;
  font-size: 0.48rem;
  background: #647cfa;
  border-radius: 0.6rem;
}

.repair {
  padding: 0 0.333333rem;
  .repair_list {
    height: 6.666667rem;
    font-size: 0.4rem;
    color: #383838;
    .repair_item {
      display: flex;
      height: 1.573333rem;
      line-height: 1.573333rem;
      border-bottom: 0.026667rem solid #f5f5f5;
      span {
        width: 1.973333rem;
      }
      .repair_inp {
        font-size: 0.373333rem;
        color: #383838;
      }
      .quiz {
        margin: auto;
        width: 3.053333rem;
        height: 0.8rem;
        text-align: center;
        line-height: 0.8rem;
        color: #fff;
        background: #647cfa;
        border-radius: 0.4rem;
      }
    }
  }
}
</style>